@charset 'utf-8';

@import 'reset';


body,html,.web{
    width: 100%;
    height: 100%;
}
*{
    margin: 0;
    padding: 0;
}
.swiper-container{
    width: 100%;
    height: 100%;
}

.page{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-1{
    width: 100%;
    height: 100%;
    background: #4b4b4b;
    position: relative;
    .desc-1{
       width: 100%;
       margin: 0 auto;
       position: absolute;
       left: 0;
       bottom: gr(100);
       text-align: center;
       i{
          font-size: gr(50);  
          color: white;  
       }
    } 
    
    .desc-2{
       position: absolute;
       left: 0;
       bottom: gr(100);
       font-size: gr(50); 
    }  
    
    span{
        opacity: 0;
    }
}

span:first-child{
    animation:show 1500ms linear 150ms infinite forwards;
}


span:nth-child(2){
    animation:show 1500ms linear 300ms infinite forwards;
}


span:nth-child(3){
    animation:show 1500ms linear 450ms infinite forwards;
}


span:nth-child(4){
    animation:show 1500ms linear 600ms infinite forwards;
}

span:nth-child(5){
    animation:show 1500ms linear 750ms infinite forwards;
}

span:nth-child(6){
    animation:show 1500ms linear 900ms infinite forwards;
}


span:nth-child(7){
    animation:show 1500ms linear 1050ms infinite forwards;
}

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.desc-3{
    position: absolute;
    right: 0;
    bottom: gr(50);
    font-size: gr(50);
    span:first-child{
        animation:show 2500ms linear 1300ms infinite forwards;
    }
    
    
    span:nth-child(2){
        animation:show 2500ms linear 1450ms infinite forwards;
    }
    
    
    span:nth-child(3){
        animation:show 2500ms linear 1600ms infinite forwards;
    }
    
    
    span:nth-child(4){
        animation:show 2500ms linear 1750ms infinite forwards;
    }
    
    span:nth-child(5){
        animation:show 2500ms linear 1900ms infinite forwards;
    }
    
    span:nth-child(6){
        animation:show 2500ms linear 2050ms infinite forwards;
    }
    
    
    span:nth-child(7){
        animation:show 2500ms linear 2200ms infinite forwards;
    }  
    
    span:nth-child(8){
        animation:show 2500ms linear 2450ms infinite forwards;
    }  
    
    span:nth-child(9){
        animation:show 2500ms linear 2650ms infinite forwards;
    }  
}


.page-2{
     width: 100%;
     height: 100%;
     background: white;
    .run{
        width: gr(450);
        height: gr(450);
        animation: run 1300ms ease-in infinite backwards; 
        background-image: url(../img/run2.png);  
        background-position: 0 0; 
        background-size: cover;      
    }
    .font-wrap{
        transform-style: preserve-3d;
    }
    .font{
        width: gr(400);
        height: gr(240);
        background: #ccc;
        transform-origin: bottom;

        img{
            width: 100%;
        }
    } 
    .popup{
        width: 100%;
        height: gr(200);
        margin-top: gr(20);
        p{
            height: 100%;
            font-size: gr(50);
            float: right;
            background: #CCCCCC;
            margin-right: gr(50);
            position: relative;
            line-height: gr(200);
            padding-left: gr(20);
            padding-right: gr(20);
            border-radius: gr(10);
            color: white;
            animation: appear 3000ms ease-in 150ms infinite;
        }
        p::after{
            content: '';
            display: block;
            width: gr(36);
            height: gr(16);
            border-top-width: gr(15);
            border-top-style: solid;
            border-top-color: #CCCCCC;  
            border-radius: 0 gr(50) 0 0;            
            position: absolute;
            left: 100%;
            top: gr(120);
        }
    }
}


@keyframes run {
    from{
        transform: translateX(-225);
        background: url(../img/run2.png) no-repeat; 
        background-size: cover; 
        background-position: 0 0; 
    }
    to{
        transform: translateX(100%);
        background: url(../img/run1.png) no-repeat;
        background-size: cover; 
        background-position: 0 0;  
    }
}

.page-3{
    width: 100%;
    height: 100%;
    background: #CCCCCC; 
    .top{
        width: gr(300);
        height: gr(150);
        animation: fly 1000ms linear infinite;
    }
    ul{
        width: gr(150);
        height: gr(50);
        float: left;
        font-size: 0;
        margin-top: gr(25);
        li{
            width: gr(50);
            height: gr(50);
            line-height: gr(50);
            display: inline-block;
            font-size: gr(50);
            vertical-align: middle;
            text-align: center;             
        }
        
        li:first-of-type{
            animation: jump 300ms ease-in-out 150ms infinite;   
        }
        
        li:nth-of-type(2){
            animation: jump 300ms ease-in-out 300ms infinite;   
        }
        
        li:nth-of-type(3){
            animation: jump 300ms ease-in-out 450ms infinite;   
        }
        
        
    } 
    .crow{
        float: left;
        width: gr(150);
        height: gr(100);
        img{
            width: 100%;
        }
    }
    
    .wind-wrap{
        transform-style: preserve-3d;    
    }
    
    .wind{
        width: gr(250);
        height: gr(500);
        img{
            width: 100%;
        }
    }
    p{
      width: 100%;
    }
    
    .desc-2{
        text-align: right;
    }
}

.boom{
    animation: boom 300ms ease-in-out 150ms infinite;
}

@keyframes boom{
    from{
        transform: translateX(gr(-150)) translateY(gr(-10)) rotateY(0deg);
    }
    to{
       transform: translateX(gr(150)) translateY(gr(10)) rotateY(180deg); 
    }
}


@keyframes jump{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(gr(10));
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes fly{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(100%);
    }
}

.cloud{
    width: gr(50);
    height: gr(50);
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    box-shadow: 
    #CCC gr(65) gr(-15) gr(0) gr(-5), 
    #CCC gr(25) gr(-25), 
    #CCC gr(30) gr(10), 
    #CCC gr(60) gr(15) gr(0) gr(-10), 
    #CCC gr(85) gr(5) 0 gr(-5);
    animation: move 1000ms ease-in-out 150ms;
    z-index: 250;
}

.c-1{
    left: gr(100);
    top: gr(50);
    animation: cloudShake 1000ms linear infinite;
}
.c-2{
    left: 0;
    top: gr(420);
    width: gr(250);
    height: gr(250); 
    box-shadow: 
    #CCC -6rem 1rem 0 -0.125rem, 
    #CCC -4rem -2rem, 
    #CCC -3rem 2rem, 
    #CCC 1rem 2rem 0 -0.25rem, 
    #CCC 3rem 1rem 0 -0.125rem;
    animation: cloudMove-2 2000ms linear 0ms forwards;
}

@keyframes cloudMove-2{
    from{
        transform:  translateX(0);
    }  
    
    to{
        transform:  translateX(gr(250));
    }  
}

.c-3{
    left: gr(360);
    top: gr(120);
    animation: cloudShake 1000ms linear infinite;
    transform-origin: center right;
}

@keyframes cloudShake{
    0%{
        transform: rotateZ(0deg);
    }
    
    50%{
        transform: rotateZ(-3deg);
    }
    
    75%{
        transform: rotateZ(3deg);
    }
    
    100%{
        transform: rotateZ(0deg);
    }
}

.c-4{
    right: 0;
    top: gr(210);
    animation: cloudMove-4 2000ms linear 0ms forwards;
}

@keyframes cloudMove-4 {
    from{
        transform: translateX((0)); 
    }
    
    to{
       transform: translateX(gr(-120)); 
    }
}

.c-5{
    width: gr(90);
    height: gr(90);
    right: 0;
    top: 9rem;
    box-shadow: 
    #CCC 2rem -1rem 0rem -0.125rem,
    #CCC 1rem -1rem, #CCC 0.75rem 0.25rem, 
    #CCC 3rem 0rem 0rem -0.25rem,
    #CCC 2rem 0rem 0 -0.125rem;
    animation: cloudMove-5 2000ms linear 0ms forwards;
}

@keyframes cloudMove-5{
    from{
        transform: translateX((0)); 
    }
    
    to{
       transform: translateX(gr(-150)); 
    }
}


.c-6{
    left: 0;
    top: 6.75rem;
    animation: cloudMove-6 2000ms linear 0ms forwards;
}

@keyframes cloudMove-6{
   from{
        transform: translateX((0)); 
    }
    
    to{
       transform: translateX(gr(100)); 
    }
}

.c-7{
    width: gr(120);
    height: gr(120); 
    left: 0;
    top: 4.75rem;
    box-shadow: 
    #CCC -1rem 0rem 0rem -0.125rem,
    #CCC 0.625rem -0.625rem,
    #CCC -1rem -1rem, 
    #CCC -2rem 0rem 0rem -0.25rem, 
    #CCC 2rem 0rem 0 -0.125rem;
    animation: cloudMove-7 2000ms linear 0ms forwards;
}

@keyframes cloudMove-7{
   from{
        transform: translateX((0)); 
    }
    
    to{
       transform: translateX(gr(270)); 
    }
}


.c-8{
    left: gr(500);
    top: gr(60);
    animation: cloudShake 1000ms linear infinite;
}

.sun-mask{
     position: absolute;
     z-index: 200;
     width:  gr(160);
     height: gr(160);
     left: gr(230);
     top: gr(280);
     background:rgba(255, 238, 68, 1);
     border-radius: 50%;
}

.sun{
      position: absolute;
      width: gr(160);
      height: gr(160);
      left: gr(310);
      top: gr(360);
      transform: translate(-50%, -50%);
      border-radius:50%;
      background:rgba(255, 238, 68, 1);
      box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff;
      z-index: 100;
}



 .sunshine-1{
      position: absolute;
      top: 50%;
      left: 50%;
      height: 0;
      width: 0;
      transform: translate(-50%, -50%) rotate(30deg);
      z-index:-100;
      background-image:
      -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),
      -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
      background-size: 20px 100%, 100% 20px;
      background-repeat: no-repeat;
      background-position: center center, center center;
      animation:sunRotate 10s linear infinite;
}


.sunshine-2{
      position: absolute;
      top: 50%;
      left: 50%;
      height: 0;
      width: 0;
      transform: translate(-50%, -50%) rotate(30deg);
      z-index:-100;
      background-image:
      -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),
      -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
      background-size: 20px 100%, 100% 20px;
      background-repeat: no-repeat;
      background-position: center center, center center;
      animation:sunRotate2 10s linear infinite;
}

@keyframes sunRotate{
    0%{
        transform: translate(-50%, -50%) rotate(30deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(390deg);
    }
}
      
@keyframes sunRotate2{
    0%{
        transform: translate(-50%, -50%) rotate(75deg); 
    }
    100%{
        transform: translate(-50%, -50%) rotate(335deg);
    }
}



